<template>
  <div>
    <!-- 统计卡片 -->
    <a-row :gutter="16">
      <a-col
        :xl="6"
        :lg="12"
        :md="12"
        :sm="24"
        v-for="(item, index) in stats"
        :key="index"
      >
        <a-card class="statistic-card" :bordered="false">
          <div class="card-content">
            <div class="card-icon">
              <component :is="item.icon" />
            </div>
            <div class="card-info">
              <span class="statistic-title">{{ item.title }}</span>
              <span class="statistic-value">¥ {{ item.value }}</span>
              <span class="statistic-trend">
                <component :is="item.trendIcon" />
                {{ item.trendValue }}
              </span>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 可视化图表 -->
    <a-row :gutter="16" style="margin-top: 12px">
      <a-col :span="12">
        <a-card title="收益趋势">
          <div ref="lineChart" style="height: 300px"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="收益分布">
          <div ref="pieChart" style="height: 300px"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import {
  ArrowUpOutlined,
  ArrowDownOutlined,
  MoneyCollectOutlined,
  WalletOutlined,
  RiseOutlined,
  PieChartOutlined,
} from "@ant-design/icons-vue";
import { requestData } from "@/utils/api.js";

export default {
  components: {
    ArrowUpOutlined,
    ArrowDownOutlined,
    MoneyCollectOutlined,
    WalletOutlined,
    RiseOutlined,
    PieChartOutlined,
  },
  setup() {
    const lineChart = ref(null);
    const pieChart = ref(null);

    const data = ref({}); // 用于存储数据的数组

    // 统计卡片数据
    const stats = ref([
      {
        title: "今日收益",
        value: 0,
        icon: MoneyCollectOutlined,
        trendIcon: ArrowUpOutlined,
        trendValue: "+12%",
      },
      {
        title: "本周收益",
        value: 0,
        icon: WalletOutlined,
        trendIcon: ArrowDownOutlined,
        trendValue: "-5%",
      },
      {
        title: "本月收益",
        value: 0,
        icon: RiseOutlined,
        trendIcon: ArrowUpOutlined,
        trendValue: "+18%",
      },
      {
        title: "累计收益",
        value: 0,
        icon: PieChartOutlined,
        trendIcon: ArrowUpOutlined,
        trendValue: "+22%",
      },
    ]);

    onMounted(async () => {
      // const { data: indexData } = await requestData("/dashboard");
      // data.value = indexData;
      // stats.value[0].value = indexData.todayIncome;
      // stats.value[1].value = indexData.thisWeekIncome;
      // stats.value[2].value = indexData.thisMonthIncome;
      // stats.value[3].value = indexData.totalIncome;

      // 初始化图表
      initLineChart();
      initPieChart();
    });

    // 初始化折线图
    const initLineChart = () => {
      const chart = echarts.init(lineChart.value);
      chart.setOption({
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "收益",
            type: "line",
            data: [1200, 2000, 1500, 3000, 2500, 4000, 3500],
          },
        ],
      });
    };

    // 初始化饼图
    const initPieChart = () => {
      const chart = echarts.init(pieChart.value);
      chart.setOption({
        series: [
          {
            name: "收益分布",
            type: "pie",
            data: [
              { value: 1048, name: "产品A" },
              { value: 735, name: "产品B" },
              { value: 580, name: "产品C" },
              { value: 484, name: "产品D" },
              { value: 300, name: "产品E" },
            ],
          },
        ],
      });
    };

    return {
      stats,
      lineChart,
      pieChart,
    };
  },
};
</script>

<style scoped>
.statistic-card {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.card-content {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-height: 120px;
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  margin-right: 20px;
}

.card-info {
  flex: 1;
}

.statistic-title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 4px;
}

.statistic-value {
  font-size: 24px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  margin: 8px 0;
}

.statistic-trend {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>
